import React, { useEffect, useState } from "react";
import { Space, Table, Card, Modal, Button, Drawer } from "antd";
import type { ColumnsType } from "antd/es/table";
import { useSelector } from "react-redux";
import { RootState } from "@/redux";
import useModal from "@/hooks/useModal";
import useMessage from "@/hooks/useMessage";
import styles from "./index.module.less";
import { getTagDetail, getTagList, removeTag } from "@/redux/modules/tag/action";
import TagAdd from "../TagAdd";
import TagFilter from "../TagFilter";
import { Tag } from "@/api/interface/tag";

interface DataType {
	id: number;
	key: number;
	tag_name: string;
	tag_classify: string;
	createdAt: string;
}
[];

const TagList: React.FC = props => {
	const columns: ColumnsType<DataType> = [
		{
			title: "id",
			dataIndex: "id",
			key: "id"
		},
		{
			title: "标签",
			dataIndex: "tag_name",
			key: "tag_name"
		},
		{
			title: "标签类别",
			dataIndex: "tag_classify",
			key: "tag_classify"
		},
		{
			title: "创建日期",
			dataIndex: "createdAt",
			key: "createdAt"
		},
		{
			title: "操作",
			key: "action",
			render: (_, row) => {
				return (
					<>
						<Space size="middle">
							<a onClick={() => openEdit(row)}>修改</a>
							<a onClick={() => openModal(row.id)}>删除</a>
						</Space>
					</>
				);
			}
		}
	];

	const listExtra = (
		<div style={{ display: "flex", gap: 8 + "px" }}>
			<Button type="primary" onClick={() => setAddVisible(true)}>
				新增
			</Button>
			<Button type="primary" onClick={() => getTagList()}>
				刷新
			</Button>
		</div>
	);

	const { contextHolder, success } = useMessage();
	const { id, isModalOpen, openModal, closeModal } = useModal();

	const deleteTag = () => {
		removeTag(id);
		closeModal();
		success("删除成功");
	};

	const tagList = useSelector((state: RootState) => state.tag.tagList);
	const tagTotal = useSelector((state: RootState) => state.tag.tagTotal);

	const data: DataType[] = tagList.map(item => {
		return {
			id: item.id,
			key: item.id,
			tag_name: item.tag_name,
			tag_classify: item.tag_classify,
			createdAt: item.createdAt
		};
	});

	useEffect(() => {
		getTagList();
	}, []);
	const onChangePage = (page: number) => {
		getTagList(page, 10);
	};

	// 修改
	const [editVisible, setEditVisible] = useState(false);
	const openEdit = async (tag: DataType) => {
		getTagDetail(tag);
		setEditVisible(true);
	};
	const onCloseEdit = () => {
		getTagList();
		setEditVisible(false);
	};

	// 新增
	const [addVisible, setAddVisible] = useState(false);
	const onCloseAdd = () => {
		getTagList();
		setAddVisible(false);
	};

	// 搜索
	const onSearch = (tag?: Tag) => {
		getTagList(1, 10, tag);
	};

	return (
		<div className={styles.root}>
			{contextHolder}
			<TagFilter onSearch={onSearch} />
			<Card title="数据列表" extra={listExtra}>
				<Table columns={columns} dataSource={data} pagination={{ total: tagTotal, onChange: onChangePage }} />
			</Card>

			<Modal title="提醒" mask={false} visible={isModalOpen} onOk={deleteTag} onCancel={closeModal}>
				确定删除该标签吗
			</Modal>

			<Drawer
				title="新增"
				placement="right"
				width={500}
				onClose={() => {
					setAddVisible(false);
				}}
				visible={addVisible}
			>
				<TagAdd onComfirm={onCloseAdd}></TagAdd>
			</Drawer>

			<Drawer
				title="修改"
				placement="right"
				width={500}
				onClose={() => {
					setEditVisible(false);
				}}
				visible={editVisible}
			>
				<TagAdd type="edit" onComfirm={onCloseEdit}></TagAdd>
			</Drawer>
		</div>
	);
};

export default TagList;
